import {
  Component,
  ConfigItem,
  requireResource,
  resourcesList,
} from "../../../../../../component";
import { JH } from "../../../../test/run";
export class Swiper
  implements Component<JQueryStatic, JH> {
  constructor() { }
  pack(): void { }
  getCss(): (
    | { type: "file"; path: string }
    | { type: "element"; selector: string }
  )[] {
    return [
      {
        type: "file",
        path: "./res/css/index.css"
      },
      {
        type: "file",
        path: "./res/css/swiper-bundle.min.css"
      },
    ];
  }
  getJs(): (
    | { type: "file"; path: string }
    | { type: "element"; selector: string }
  )[] {
    return [
      {
        type: "file",
        path: "./res/js/swiper-bundle.min.js"
      },
      {
        type: "file",
        path: "./res/js/index.js"
      }
    ];
  }
  getName(): string {
    return "swiper";
  }
  beforeLoad($: JQueryStatic, dom: JH, resource: resourcesList[], moduleName: string): void {
    // const moduleName = dom.attr("id")
    $('head').append($(`
      <script>
      window['${moduleName}'] = {}
     </script>
    `))

    /**
     window['${moduleName}']['config'] = ${JSON.stringify({
    })}
     */
    $('head').append(`<script type="config" id='${moduleName}_config'>
    ${JSON.stringify({
      slidesPerView: 5,
      rate: 3,
      initialRate: 40,
      distance: 12,
      scale: 0.02,
      beforeLoad: 'init'
    })
      }
    </script>
    `)
  }
  config(
    configArr: ConfigItem<JQueryStatic, JH>[]
  ): void {
    configArr.push({
      domSelector: "DOMSELECTOR",
      trigger: ($: JQueryStatic, domSelector: string) => {
        return $(domSelector);
      },
      desc: [
        {
          name: "添加轮播图片",
          value: "true",
          inputType: "resources",
          onchange($, ele, val, baseUrl) {
            if (val.length % 2 !== 1 || val.length < 3) {
              alert("轮播图数量必须为单数并且大于3!")
              console.log(val.length % 2, val.length, val);
              return;
            }

            const container = ele.find(".swiper-wrapper")
            const template = $(ele.find(".swiperTemplate").children()[0]).clone()
            // template.removeAttr("style")
            container.html("")
            let containerWidth;
            try {
              containerWidth = (ele.find(".mySwiper").outerWidth() || 1) / +($('html').css('font-size').replace("px", ''))
            } catch (e) {

            }
            for (let i = 0; i < val.length; i++) {
              const url = baseUrl + val[i]
              const newItem = template.clone()
              if (containerWidth)
                newItem.attr("style", `width: ${containerWidth / val.length}rem;`)
              newItem.find("img").attr("src", url)
              container.append(newItem)
            }

            // try {
            //   const moduleName = ele.attr("id")
            //   window[moduleName as any]['func'].run()
            // } catch (e) {
            // }
          },
        },
        {
          name: ['缩放', '轮播距离', '初始旋转角度', '增量旋转角度', '展示数量'],
          value: ['0.02', '12', '40', '3', '5'],
          inputType: "collection",
          onchange($, ele, val) {
            // console.log(val.map(val => val.value));

            const moduleName = ele.attr("id")
            const node = $(`#${moduleName}_config`)
            const config = JSON.parse(node.html() || '{}')

            //缩放
            config.scale = +val[0].value
            //轮播距离
            config.distance = +val[1].value
            //初始旋转角度
            config.initialRate = +val[2].value
            //增量旋转角度
            config.rate = +val[3].value
            //展示数量
            config.slidesPerView = +val[4].value
            node.html(JSON.stringify(config))
            try {
              window[moduleName as any]['func'].run()
            } catch (e) {
            }
          },

        },
        {
          name: "修改背景图片",
          value: "",
          inputType: "resources",
          onchange($, ele, val, baseUrl) {
            console.log('change bg: ' + val);

            ele.attr("style", `background: url(${baseUrl + val[0]}) 0 0 / 100% 100% no-repeat`)
          },
        }
      ]
    })
  }
  require(): requireResource {
    return {};
  }
}
